<template>
  <div class="jobfair">
    <div class="header">
      <carousel-top :config="carouselConfig"></carousel-top>
      <div class="header-top">
        <header-nav></header-nav>
      </div>
      <section class="wy-search">
        <div class>
          <el-input
            prefix-icon="el-icon-search"
            placeholder="搜索职位/公司"
            v-model="filter.keyword"
            clearable
            class="input-with-select"
            @keyup.enter.native="searchFn"
          >
            <el-button type="primary" @click="searchFn" slot="append">搜索</el-button>
          </el-input>
        </div>
        <div
          class="hot-words"
        >热门搜索： 互联网类视频双选会 长沙理工大学 金融类专场视频双选会 湖南工商大学 教育部24365 湖南大学 艺术类线上双选会 建筑类视频双选会</div>
      </section>
    </div>
    <section>
      <section class="ongoing">
        <!-- 进行中的  TODO:: 交互问题，如果出现多行那么就不能够左右滑动，不然不是6的整数，滑动非常不好 -->
        <div class="container">
          <div class="list-title">
            <img src="./images/rocket.png" alt />
            <span>正在进行中</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item, index) in list.data" :key="index">
              <card-jobfair :item="item"></card-jobfair>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="category">
        <!-- TODO:: 类别：1.专场暂时没有 2.在进行中已经展示的数据是否还需要展示 -->
        <div class="container">
          <div class="list-title">
            <img src="./images/rocket.png" alt />
            <span>高校专场</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item, index) in list.data" :key="index">
              <card-jobfair :item="item"></card-jobfair>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="seek"></section>
    </section>
    <footer-box></footer-box>
  </div>
</template>

<script>
import HeaderNav from "components/Header/HeaderNav";
import CarouselTop from "components/Carousel/CarouselTop";
import FooterBox from "components/Footer/FooterBox";
import CardJobfair from "components/Card/CardJobfair";

export default {
  name: "jobfair",
  components: {
    HeaderNav,
    CarouselTop,
    FooterBox,
    CardJobfair
  },
  data() {
    return {
      dialogVisible: false,
      carouselConfig: {
        height: "390px",
        autoplay: true,
        interval: 5000
      },
      filter: {
        keyword: ""
      },
      imgConfig: {
        rocket: "./images/rocket.png"
      },
      list: {
        data: [
          {
            video_jobfair_id: "991",
            name:
              "“百日齐冲刺.就业一帮一”广东高校结对湖北高校2020届毕业生网络专场",
            start_time: "2020-06-29 09:30",
            end_time: "2020-07-01 18:00",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1592806592-6234.png?x-oss-process=style/w128-h128",
            organizers: "云就业；云校招",
            co_organizer: "云就业；云校招",
            nums: "300",
            finish_time: "2020-07-01 18:00",
            view_nums: "19830",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "5000",
            sort: "5",
            timesort1: "0",
            numbs: "273",
            approve_count: "194",
            state: 1,
            seeker_numbs: "2272",
            current_status: "进行中"
          },
          {
            video_jobfair_id: "1008",
            name: "哈尔滨师范大学“战疫情·周三有约”系列视频双选会",
            start_time: "2020-07-01 09:00",
            end_time: "2020-07-01 17:00",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1592184981-1199.png?x-oss-process=style/w128-h128",
            organizers: "哈尔滨师范大学",
            co_organizer: "云就业",
            nums: "80",
            finish_time: "2020-06-30 17:00",
            view_nums: "3486",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "1000",
            sort: "1",
            timesort1: "0",
            numbs: "124",
            approve_count: "61",
            state: 1,
            seeker_numbs: "626",
            current_status: "进行中"
          },
          {
            video_jobfair_id: "1013",
            name: "“津英就业”国有企业专场视频双选会",
            start_time: "2020-06-22 09:30",
            end_time: "2020-07-05 18:00",
            img: "",
            organizers: "天津市大中专学校",
            co_organizer: "云就业；云校招",
            nums: "100",
            finish_time: "2020-07-05 18:00",
            view_nums: "30124",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "1000",
            sort: "1",
            timesort1: "0",
            numbs: "96",
            approve_count: "63",
            state: 1,
            seeker_numbs: "3198",
            current_status: "进行中"
          },
          {
            video_jobfair_id: "1024",
            name: "湖南衡阳地区四校联合线上视频招聘会邀请函",
            start_time: "2020-06-28 09:00",
            end_time: "2020-07-10 18:00",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1592646159-3846.png?x-oss-process=style/w128-h128",
            organizers: "南华大学、衡阳师范学院、湖南工学院、湖南交通工程学院",
            co_organizer: "云就业 云校招",
            nums: "200",
            finish_time: "2020-07-10 09:00",
            view_nums: "7220",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "6000",
            sort: "1",
            timesort1: "0",
            numbs: "114",
            approve_count: "68",
            state: 1,
            seeker_numbs: "1160",
            current_status: "进行中"
          },
          {
            video_jobfair_id: "1062",
            name: "晋中市服务山西农大“云招聘”视频双选会",
            start_time: "2020-06-29 09:30",
            end_time: "2020-07-15 18:00",
            img: "",
            organizers: "晋中市人力资源和社会保障局 山西农业大学",
            co_organizer:
              "晋中市委人才办 太谷区人力资源和社会保障局  山西农谷管委会",
            nums: "100",
            finish_time: "2020-07-15 18:00",
            view_nums: "3705",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "2000",
            sort: "1",
            timesort1: "0",
            numbs: "59",
            approve_count: "39",
            state: 1,
            seeker_numbs: "463",
            current_status: "进行中"
          },
          {
            video_jobfair_id: "1018",
            name: "皖南医学院2020届毕业生网络视频双选会",
            start_time: "2020-06-30 09:00",
            end_time: "2020-09-30 17:00",
            img: "",
            organizers: "皖南医学院",
            co_organizer: "云就业",
            nums: "100",
            finish_time: "2020-06-29 18:00",
            view_nums: "4877",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "2000",
            sort: "1",
            timesort1: "0",
            numbs: "57",
            approve_count: "54",
            state: 1,
            seeker_numbs: "594",
            current_status: "进行中"
          },
          {
            video_jobfair_id: "1040",
            name: "2020年7所高校助力脱贫攻坚网上视频双选会",
            start_time: "2020-07-13 09:00",
            end_time: "2020-07-14 17:00",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1592876642-1528.jpg?x-oss-process=style/w128-h128",
            organizers:
              "贵州民族大学、贵州财经大学、贵州师范学院、贵州商学院 、遵义医科大学、遵义师范学院、遵义医科大学医学与科技学院（以上排名不分先）",
            co_organizer: "云就业/云校招",
            nums: "500",
            finish_time: "2020-07-12 20:00",
            view_nums: "1448",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "10000",
            sort: "1",
            timesort1: "1",
            numbs: "231",
            approve_count: "149",
            state: 0,
            seeker_numbs: "180",
            current_status: "报名中"
          },
          {
            video_jobfair_id: "1084",
            name:
              "“云就业高校联盟”2020届未签约毕业生暨2021届实习生营销财会类专场视频招聘会",
            start_time: "2020-07-16 09:00",
            end_time: "2020-07-17 18:00",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1593481955-3413.png?x-oss-process=style/w128-h128",
            organizers: "云就业 云校招",
            co_organizer: "云就业联盟高校",
            nums: "50",
            finish_time: "2020-07-15 12:00",
            view_nums: "1951",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "5000",
            sort: "2",
            timesort1: "1",
            numbs: "7",
            approve_count: "0",
            state: 0,
            seeker_numbs: "397",
            current_status: "报名中"
          },
          {
            video_jobfair_id: "1029",
            name: "云就业视频双选会湖南地区交通建筑专场招聘会",
            start_time: "2020-07-03 09:00",
            end_time: "2020-07-03 18:00",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1592474589-5228.png?x-oss-process=style/w128-h128",
            organizers: "湖南省大中专学校学生信息咨询与就业指导中心",
            co_organizer: "长沙市云研网络科技有限公司",
            nums: "300",
            finish_time: "2020-07-02 12:00",
            view_nums: "2605",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "8000",
            sort: "3",
            timesort1: "1",
            numbs: "188",
            approve_count: "122",
            state: 0,
            seeker_numbs: "509",
            current_status: "报名中"
          },
          {
            video_jobfair_id: "1085",
            name:
              "“云就业高校联盟”2020届未签约毕业生暨2021届实习生大型综合视频招聘会",
            start_time: "2020-07-21 09:00",
            end_time: "2020-07-22 18:00",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1593482121-4255.png?x-oss-process=style/w128-h128",
            organizers: "云就业 云校招",
            co_organizer: "云就业联盟高校",
            nums: "80",
            finish_time: "2020-07-20 12:00",
            view_nums: "1002",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "5000",
            sort: "4",
            timesort1: "1",
            numbs: "3",
            approve_count: "0",
            state: 0,
            seeker_numbs: "219",
            current_status: "报名中"
          },
          {
            video_jobfair_id: "1066",
            name: "兰州理工大学2020届未就业毕业生线上+线下双选会",
            start_time: "2020-07-02 09:00",
            end_time: "2020-07-02 16:00",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1593131403-5463.jpg?x-oss-process=style/w128-h128",
            organizers: "兰州理工大学",
            co_organizer: "云就业",
            nums: "100",
            finish_time: "2020-07-02 15:00",
            view_nums: "1613",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "2000",
            sort: "1",
            timesort1: "1",
            numbs: "46",
            approve_count: "0",
            state: 0,
            seeker_numbs: "348",
            current_status: "报名中"
          },
          {
            video_jobfair_id: "1051",
            name:
              "24365校园招聘服务活动之 湖南工业大学2020届毕业生“乘风破浪，扬帆起航” 空中双选会",
            start_time: "2020-07-02 09:30",
            end_time: "2020-07-02 17:30",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1592986000-6767.png?x-oss-process=style/w128-h128",
            organizers: "湖南工业大学",
            co_organizer: "云就业",
            nums: "150",
            finish_time: "2020-06-30 18:00",
            view_nums: "3181",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "2000",
            sort: "1",
            timesort1: "1",
            numbs: "100",
            approve_count: "98",
            state: 0,
            seeker_numbs: "538",
            current_status: "待开始"
          },
          {
            video_jobfair_id: "1046",
            name: "广州市医药职业学校2021届毕业生视频双选会 邀请函",
            start_time: "2020-07-03 09:00",
            end_time: "2020-07-03 18:00",
            img: "",
            organizers: "广州市医药职业学校",
            co_organizer: "云就业；云校招",
            nums: "50",
            finish_time: "2020-07-01 18:00",
            view_nums: "20479",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "1000",
            sort: "1",
            timesort1: "1",
            numbs: "40",
            approve_count: "36",
            state: 0,
            seeker_numbs: "459",
            current_status: "报名中"
          },
          {
            video_jobfair_id: "1042",
            name: "湘中幼儿师范高等专科学校2020届毕业生（七月） 网络视频双选会",
            start_time: "2020-07-04 09:00",
            end_time: "2020-07-04 18:00",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1592646143-8094.png?x-oss-process=style/w128-h128",
            organizers: "湘中幼儿师范高等专科学校招生就业处",
            co_organizer: "云就业",
            nums: "100",
            finish_time: "2020-07-02 18:00",
            view_nums: "1191",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "1000",
            sort: "1",
            timesort1: "1",
            numbs: "39",
            approve_count: "6",
            state: 0,
            seeker_numbs: "220",
            current_status: "报名中"
          },
          {
            video_jobfair_id: "1056",
            name: "泉州医学高等专科学校云就业视频双选会（第五场）",
            start_time: "2020-07-05 09:30",
            end_time: "2020-07-05 18:00",
            img:
              "http://yun-campus-res.oss-cn-shenzhen.aliyuncs.com/openday/company/1592960292-9795.png?x-oss-process=style/w128-h128",
            organizers: "泉州医学高等专科学校就业指导中心",
            co_organizer: "云就业；云校招",
            nums: "50",
            finish_time: "2020-07-04 18:00",
            view_nums: "943",
            attention_nums: "0",
            share_title: "",
            share_desc: "",
            share_link: "",
            share_img: "",
            stu_numb: "3000",
            sort: "1",
            timesort1: "1",
            numbs: "18",
            approve_count: "17",
            state: 0,
            seeker_numbs: "186",
            current_status: "报名中"
          }
        ]
      }
    };
  },
  methods: {
    handleClose(done) {
      this.dialogVisible = false;
    },
    searchFn() {
      console.log("搜索", this.filter.keyword);
    }
  }
};
</script>

<style lang="scss">
.wy-search {
  .el-input__inner {
    height: 50px;
  }

  .el-input-group__append {
    .el-button--primary {
      background-color: #007fff !important;
      border-color: #007fff !important;
      color: #fff !important;
      // padding: 18px 57px;
      font-size: 16px;

      height: 50px;
      width: 145px;

      &:hover {
        background-color: #409eff !important;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
$mainWidth: 1200px;
$titleFont: 18px;
$titleColor: #171717;

.title-font {
  line-height: 25px;
  color: $titleColor;
  font-size: $titleFont;
  font-weight: bold;
}

.list-title {
  margin-bottom: 30px;
  span {
    @extend .title-font;
  }
  img {
    vertical-align: middle;
  }
}

.jobfair {
  position: relative;
  height: 100%;

  .header {
    position: relative;
    padding: 0;

    .header-top {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 3;
    }

    .wy-search {
      position: absolute;
      left: 50%;
      top: 250px;
      z-index: 3;
      width: $mainWidth;
      height: 167px;
      background-color: #fff;

      padding: 40px;
      box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.05);

      border-radius: 10px;
      box-sizing: border-box;
      transform: translateX(-50%);

      .hot-words {
        font-size: 12px;
        line-height: 17px;
        margin-top: 10px;
        color: #999;
      }
    }
  }

  .el-main {
    padding: 0;
  }

  .ongoing {
    background-color: rgba(250, 250, 250, 1);
    padding: 67px 0 40px;
  }

  .category {
    background-color: #fff;
    padding: 40px 0 60px;
  }
}
</style>
